<template>
    <div class="produce-schedule-page">
        <el-card>
            <div class="header-bar">
                <span class="title">生产排产管理</span>
                <el-input v-model="search.keyword" placeholder="排产单号/工单/产品/负责人" size="small"
                    style="width:220px;margin-right:10px;" clearable />
                <el-select v-model="search.status" placeholder="状态" size="small" style="width:110px;margin-right:10px;"
                    clearable>
                    <el-option label="排产中" value="排产中" />
                    <el-option label="已完成" value="已完成" />
                    <el-option label="异常" value="异常" />
                </el-select>
                <el-radio-group v-model="viewMode" style="margin-right:12px;">
                    <el-radio-button label="列表" />
                    <el-radio-button label="时间轴" />
                </el-radio-group>
                <el-button type="primary" size="small" @click="onAdd">新增排产单</el-button>
            </div>

            <!-- 列表视图 -->
            <el-table v-if="viewMode === '列表'" :data="filteredList" border style="width:100%;margin-top:8px;">
                <el-table-column prop="scheduleCode" label="排产单号" width="120" />
                <el-table-column prop="workOrder" label="工单号" width="120" />
                <el-table-column prop="product" label="产品" min-width="120" />
                <el-table-column prop="quantity" label="排产数量" width="90" />
                <el-table-column prop="scheduleDate" label="排产日期" width="110" />
                <el-table-column prop="responsible" label="负责人" min-width="100" />
                <el-table-column prop="status" label="状态" width="90">
                    <template #default="{ row }">
                        <el-tag :type="row.status === '已完成' ? 'success' : row.status === '排产中' ? 'info' : 'warning'" size="small">{{
                            row.status }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="remark" label="备注" min-width="120" />
                <el-table-column label="操作" width="170" fixed="right">
                    <template #default="{ row }">
                        <el-button size="small" type="info" link @click="onEdit(row)">编辑</el-button>
                        <el-button size="small" type="danger" link @click="onDelete(row)">删除</el-button>
                        <el-button size="small" type="primary" link v-if="row.status === '排产中'"
                            @click="onFinish(row)">完成</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 时间轴视图 -->
            <el-timeline v-else style="margin:20px 0 0 40px;">
                <el-timeline-item v-for="item in filteredList" :key="item.scheduleCode" :timestamp="item.scheduleDate"
                    :type="item.status === '已完成' ? 'success' : item.status === '异常' ? 'danger' : 'info'">
                    <div>
                        <strong>{{ item.scheduleCode }}</strong> — 工单: {{ item.workOrder }} — 产品: {{ item.product }} — 数量:
                        {{ item.quantity }}
                    </div>
                    <div>负责人: {{ item.responsible }}　状态:
                        <el-tag :type="item.status === '已完成' ? 'success' : item.status === '排产中' ? 'info' : 'warning'" size="small">
                            {{ item.status }}
                        </el-tag>
                    </div>
                    <div v-if="item.remark" style="color:#888;">备注: {{ item.remark }}</div>
                    <div style="margin-top:4px;">
                        <el-button size="small" type="info" link @click="onEdit(item)">编辑</el-button>
                        <el-button size="small" type="danger" link @click="onDelete(item)">删除</el-button>
                        <el-button size="small" type="primary" link v-if="item.status === '排产中'"
                            @click="onFinish(item)">完成</el-button>
                    </div>
                </el-timeline-item>
            </el-timeline>
        </el-card>

        <!-- 新增/编辑弹窗 -->
        <el-dialog v-model="editDialog.visible" :title="editDialog.isEdit ? '编辑排产单' : '新增排产单'" width="420px">
            <el-form :model="editDialog.form" label-width="90px">
                <el-form-item label="排产单号">
                    <el-input v-model="editDialog.form.scheduleCode" />
                </el-form-item>
                <el-form-item label="工单号">
                    <el-input v-model="editDialog.form.workOrder" />
                </el-form-item>
                <el-form-item label="产品">
                    <el-input v-model="editDialog.form.product" />
                </el-form-item>
                <el-form-item label="排产数量">
                    <el-input-number v-model="editDialog.form.quantity" :min="1" />
                </el-form-item>
                <el-form-item label="排产日期">
                    <el-date-picker v-model="editDialog.form.scheduleDate" type="date" value-format="YYYY-MM-DD"
                        style="width: 100%;" />
                </el-form-item>
                <el-form-item label="负责人">
                    <el-input v-model="editDialog.form.responsible" />
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="editDialog.form.status">
                        <el-option label="排产中" value="排产中" />
                        <el-option label="已完成" value="已完成" />
                        <el-option label="异常" value="异常" />
                    </el-select>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="editDialog.form.remark" />
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="editDialog.visible = false">取消</el-button>
                <el-button type="primary" @click="onSaveEdit">保存</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const viewMode = ref('列表')
const search = reactive({ keyword: '', status: '' })

// 15条医药排产单模拟数据
const scheduleList = ref([
    { scheduleCode: 'SCH20240601', workOrder: 'WO20240601', product: '阿莫西林胶囊', quantity: 5000, scheduleDate: '2024-06-01', responsible: '王一', status: '排产中', remark: '主要批次' },
    { scheduleCode: 'SCH20240602', workOrder: 'WO20240602', product: '头孢曲松钠', quantity: 3500, scheduleDate: '2024-06-01', responsible: '李二', status: '已完成', remark: '正常完成' },
    { scheduleCode: 'SCH20240603', workOrder: 'WO20240603', product: '葡萄糖注射液', quantity: 2800, scheduleDate: '2024-06-02', responsible: '张三', status: '排产中', remark: '' },
    { scheduleCode: 'SCH20240604', workOrder: 'WO20240604', product: '地塞米松片', quantity: 4100, scheduleDate: '2024-06-02', responsible: '赵四', status: '异常', remark: '原料不足' },
    { scheduleCode: 'SCH20240605', workOrder: 'WO20240605', product: '氨苄西林', quantity: 2300, scheduleDate: '2024-06-03', responsible: '钱五', status: '排产中', remark: '' },
    { scheduleCode: 'SCH20240606', workOrder: 'WO20240606', product: '环磷酰胺', quantity: 1200, scheduleDate: '2024-06-03', responsible: '孙六', status: '已完成', remark: '' },
    { scheduleCode: 'SCH20240607', workOrder: 'WO20240607', product: '甲硝唑注射液', quantity: 1500, scheduleDate: '2024-06-03', responsible: '周七', status: '排产中', remark: '' },
    { scheduleCode: 'SCH20240608', workOrder: 'WO20240608', product: '左氧氟沙星', quantity: 1700, scheduleDate: '2024-06-04', responsible: '吴八', status: '已完成', remark: '及时交付' },
    { scheduleCode: 'SCH20240609', workOrder: 'WO20240609', product: '硫酸庆大霉素', quantity: 1100, scheduleDate: '2024-06-04', responsible: '郑九', status: '排产中', remark: '' },
    { scheduleCode: 'SCH20240610', workOrder: 'WO20240610', product: '阿奇霉素', quantity: 800, scheduleDate: '2024-06-05', responsible: '王十', status: '已完成', remark: '' },
    { scheduleCode: 'SCH20240611', workOrder: 'WO20240611', product: '甲氨蝶呤', quantity: 1400, scheduleDate: '2024-06-05', responsible: '李十一', status: '异常', remark: '设备故障' },
    { scheduleCode: 'SCH20240612', workOrder: 'WO20240612', product: '盐酸多巴胺', quantity: 900, scheduleDate: '2024-06-05', responsible: '张十二', status: '排产中', remark: '' },
    { scheduleCode: 'SCH20240613', workOrder: 'WO20240613', product: '正大天晴片', quantity: 2100, scheduleDate: '2024-06-06', responsible: '赵十三', status: '排产中', remark: '' },
    { scheduleCode: 'SCH20240614', workOrder: 'WO20240614', product: '维生素C', quantity: 1250, scheduleDate: '2024-06-06', responsible: '钱十四', status: '已完成', remark: '' },
    { scheduleCode: 'SCH20240615', workOrder: 'WO20240615', product: '恒瑞注射液', quantity: 2200, scheduleDate: '2024-06-07', responsible: '孙十五', status: '排产中', remark: '' },
])

const filteredList = computed(() => {
    return scheduleList.value.filter(s =>
        (!search.status || s.status === search.status) &&
        (!search.keyword ||
            s.scheduleCode.includes(search.keyword) ||
            s.workOrder.includes(search.keyword) ||
            s.product.includes(search.keyword) ||
            s.responsible.includes(search.keyword)
        )
    )
})

const editDialog = reactive({
    visible: false,
    isEdit: false,
    form: { scheduleCode: '', workOrder: '', product: '', quantity: 1, scheduleDate: '', responsible: '', status: '排产中', remark: '' }
})

function onAdd() {
    Object.assign(editDialog.form, { scheduleCode: '', workOrder: '', product: '', quantity: 1, scheduleDate: '', responsible: '', status: '排产中', remark: '' })
    editDialog.isEdit = false
    editDialog.visible = true
}
function onEdit(row) {
    Object.assign(editDialog.form, { ...row })
    editDialog.isEdit = true
    editDialog.visible = true
}
function onSaveEdit() {
    if (!editDialog.form.scheduleCode || !editDialog.form.workOrder || !editDialog.form.product) {
        ElMessage.warning('请填写完整信息')
        return
    }
    if (editDialog.isEdit) {
        const idx = scheduleList.value.findIndex(v => v.scheduleCode === editDialog.form.scheduleCode)
        if (idx !== -1) Object.assign(scheduleList.value[idx], editDialog.form)
    } else {
        if (scheduleList.value.some(v => v.scheduleCode === editDialog.form.scheduleCode)) {
            ElMessage.warning('排产单号重复')
            return
        }
        scheduleList.value.push({ ...editDialog.form })
    }
    editDialog.visible = false
}
function onDelete(row) {
    const idx = scheduleList.value.findIndex(v => v.scheduleCode === row.scheduleCode)
    if (idx !== -1) scheduleList.value.splice(idx, 1)
}
function onFinish(row) {
    row.status = '已完成'
    ElMessage.success('已完成排产')
}
</script>

<style scoped>
.produce-schedule-page {
    padding: 28px 38px 30px 38px;
    min-height: 100vh;
    background: #fff;
}

.header-bar {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
    gap: 10px;
}

.header-bar .title {
    font-size: 1.18rem;
    font-weight: 600;
    margin-right: 22px;
}
</style>
